import IconLearning from '@/assets/images/shared/icon-small-learning.svg';
import { productApi } from '@/entities/course';
import { env, innerUrls } from '@/shared/constants';
import { Button } from '@/shared/ui';
import cn from 'classnames';
import Image from 'next/image';

import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './Learning.module.scss';
import { LearningItem } from './LearningItem';

export function Learning() {
  const { data: courseFeeding } = productApi.useGetSingleProductQuery(env.courses.feeding);
  const { data: courseGagging } = productApi.useGetSingleProductQuery(env.courses.gagging);
  return (
    <ColouredInfoBlock className={cs.block} reverseResponsive>
      <div className={cs.blockTitle}>
        <h2 className="h2">Учимся</h2>
        <p className={cn('p-reversed', cs.descr)}>Изучайте материалы, полезные на&nbsp;первых этапах жизни ребенка</p>
      </div>
      <ul className={cs.learningList}>
        <li className={cs.learningItem}>
          <LearningItem
            cover={courseFeeding?.product?.image}
            link={innerUrls.course(env.courses.feeding)}
            oldPrice={courseFeeding?.product?.price}
            price={courseFeeding?.product?.discountPrice}
            title={courseFeeding?.product.title}
          />
        </li>
        <li className={cs.learningItem}>
          <LearningItem
            cover={courseGagging?.product?.image}
            link={innerUrls.course(env.courses.gagging)}
            oldPrice={courseGagging?.product?.price}
            price={courseGagging?.product?.discountPrice}
            title={courseGagging?.product?.title}
          />
        </li>
      </ul>
      <Button
        aria-label="Перейти к выбору"
        className={cs.button}
        data-testid="link-catalog"
        href={innerUrls.catalog}
        link
        target="_self"
      >
        <Image alt="Learning" height={24} src={IconLearning} width={24} />
        Перейти к выбору
      </Button>
    </ColouredInfoBlock>
  );
}
